<template>
	<view class="container">
		<!-- 头像 -->
		<view class="cover">
			<view class="avatar">
				<!-- #ifdef MP-WEIXIN-->
				<open-data type="userAvatarUrl"></open-data>
				<!-- #endif -->

				<!-- #ifdef H5 || APP-PLUS -->
				<u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
				<!-- #endif -->
			</view>
			<view class="nickname">请填写已有账号或注册新账号</view>
		</view>
		<view class="profile">
			<u--form :model="bind" labelPosition="left" ref="uForm" :errorType="errorType" :rules="rules">
				<!-- 邮箱 -->
				<u-form-item label="邮箱" prop="email">
					<u--input v-model="bind.email" placeholder="请输入邮箱"></u--input>
				</u-form-item>

				<!-- 密码 -->
				<u-form-item label="密码" prop="password">
					<u--input password="true" v-model="bind.password" placeholder="请输入密码"></u--input>
				</u-form-item>

				<!-- 提交按钮 -->
				<u-button @click="submit" class="btn-style" type="primary" shape="circle" text="绑定账号"></u-button>
			</u--form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bind: {
					email: '123@qq.com',
					password: null
				},
				errorType: ['uToast'],
				rules: {
					email: [{
						required: true,
						type: 'email',
						message: '请输入邮箱',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async submit() {
				this.$refs.uForm.validate().then(async (valid) => {
						if (!valid) {
							//表单没通过，消息提醒
							this.$refs.uToast.show({
								type: 'error',
								message: '资料填写有误请仔细检查'
							})

							return false
						}

						// 调用第三方接口
						uni.login({
							provider: 'weixin',
							success: async (res) => {
								let code = res.code ? res.code : '';
								if (!code) {
									this.$refs.uToast.show({
										type: 'error',
										message: '临时登录凭证获取失败'
									})
									return false
								}

								let data = {
									email: this.bind.email,
									password: this.bind.password,
									code: code
								}

								let result = await this.$u.api.user.bind(data)

								if (result.code == '1') {
									//保存到缓存(本地存储)
									uni.setStorageSync('LoginUser', result.data);

									//提醒，返回上一个界面
									this.$refs.uToast.show({
										message: result.msg,
										type: 'success',
										complete: () => {
											//history.go(-1)
											uni.$u.route({
												type: 'navigateBack',
												delta: 1
											})
										}
									})
								} else {
									this.$refs.uToast.show({
										type: 'error',
										message: result.msg
									})
									return false
								}
							}
						})

					})
					.catch(errors => {})
			}
		}
	}
</script>

<style>
	.cover {
		width: 100%;
		background: #fff;
		position: relative;
		padding: 5vh 0vh;
		text-align: center;
		z-index: 0;
	}

	.avatar {
		width: 12vh;
		height: 12vh;
		margin: 0 auto;
		border-radius: 100px;
		overflow: hidden;
		margin-bottom: 3vh;
	}

	.profile {
		margin-top: 3vh;
		background: #fff;
		padding: 0vh 2vh;
		text-align: center;
	}
</style>
